// 1. 基础雷达图组件
import BaseRadarChartComponent from "./base-radar-chart.js";

class BasicRadarChartComponent extends BaseRadarChartComponent {
    constructor() {
        super();
    }
    handleAttributeChange(name, value, currentOptions) {
        super.handleAttributeChange(name, value, currentOptions)
        switch (name) {
            // 在 handleAttributeChange 或 generateSeries 等需要处理颜色的地方直接嵌入校验逻辑
            case 'radar-splitarea-color_array': // 以雷达图分割区域颜色为例
                // 1. 解析颜色字符串为数组
                let colorArray = value.split(',').map(color => color.trim());
                // 2. 校验颜色格式是否有效
                const isValidColor = (color) => {
                    // 简单校验：支持 #xxx、#xxxxxx、rgb()、rgba()
                    const reg = /^#([0-9A-Fa-f]{3}){1,2}$|^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$|^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[0-1](\.\d+)?\s*\)$/;
                    return reg.test(color);
                };
                // 3. 检查是否有无效颜色，或数组为空
                const hasInvalidColor = colorArray.some(color => !isValidColor(color)) || colorArray.length === 0;

                // 4. 若无效，
                if (hasInvalidColor) {
                    colorArray = ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'];
                }

                // 5. 应用处理后的颜色数组
                currentOptions = {
                    radar: {
                        splitArea: {
                            areaStyle: {
                                color: colorArray
                            }
                        }
                    }
                };
                this.chart.setOption(currentOptions);
                break;
            case 'radar-splitarea-shadowcolor_colorpicker':
                this.chart.setOption({
                    radar: {
                        splitArea: {
                            areaStyle: {
                                shadowColor: value
                            }
                        }
                    }
                });
                break;
            case 'radar-splitarea-shadowblur_number':
                this.chart.setOption({
                    radar: {
                        splitArea: {
                            areaStyle: {
                                shadowBlur: parseInt(value)
                            }
                        }
                    }
                });
                break;
        }
    }
    
    // 重写默认配置
    getDefaultConfig() {
        const config = super.getDefaultConfig();
        
        // 调整基础雷达图的默认配置
        config.titleAttrs[0] = ['title-text_text', '基础雷达图']; // 标题
        config.radarAttrs[0] = ['radar-indicator_text', JSON.stringify([
            { text: "攻击力", max: 100 },
            { text: "防御力", max: 100 },
            { text: "速度", max: 100 },
            { text: "耐力", max: 100 },
            { text: "敏捷", max: 100 },
            { text: "智力", max: 100 }
        ])];
        
        return config;
    }
    
    // 重写默认数据
    getDefaultData() {
        return [
            {
                name: '英雄A',
                value: [85, 70, 90, 65, 95, 75]
            },
            {
                name: '英雄B',
                value: [70, 90, 65, 95, 75, 90]
            },
            {
                name: '英雄C',
                value: [90, 65, 80, 85, 70, 85]
            }
        ];
    }
    
    // 基础雷达图特有的渲染逻辑
    renderChart(seriesConfig, titleConfig, legendConfig, radarConfig, data = null) {
        // 调用父类渲染方法
        super.renderChart(seriesConfig, titleConfig, legendConfig, radarConfig, data);
        
        // 添加基础雷达图特有的交互效果
        this.chart.on('mouseover', (params) => {
            if (params.componentType === 'radar') {
                this.chart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: params.seriesIndex,
                    dataIndex: params.dataIndex
                });
            }
        });
        
        this.chart.on('mouseout', (params) => {
            if (params.componentType === 'radar') {
                this.chart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: params.seriesIndex,
                    dataIndex: params.dataIndex
                });
            }
        });
    }
}

// 注册组件
customElements.define('basic-radar-chart', BasicRadarChartComponent);